<template>
  <div id="chart-container"></div>
</template>

<script>
import * as d3 from "d3";

export default {
  mounted() {
    let onedu = Math.PI / 180;
    const startAngle = -90*onedu; // 初始角度（弧度制）
    const endAngle = -60*onedu; // 最终角度（弧度制）
    // const startAngle = onedu*30; // 最终角度（弧度制）
    // const endAngle = 0; // 初始角度（弧度制）

    const width = 400; // 圆弧区域的宽度
    const height = 400; // 圆弧区域的高度

    // 创建一个SVG元素并设置宽高
    const svg = d3
      .select("#chart-container")
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    // 创建一个弧生成器
    const arcGenerator = d3
      .arc()
      .innerRadius(Math.min(width, height) * 0.4) // 内半径为0，即实心圆弧
    //   .innerRadius(0) // 内半径为0，即实心圆弧
      .outerRadius(Math.min(width, height) * 0.4) // 外半径为圆弧区域宽高的40%
      .startAngle(startAngle) // 起始角度
      .endAngle(endAngle); // 结束角度

    // 将弧生成器应用于SVG元素上
    svg
      .append("path")
      .attr("d", arcGenerator)
      .attr("id", arcGenerator)
      .attr("transform", `translate(${width / 2}, ${height / 2})`)
      .attr("stroke", "red")
      .style("fill", "none"); // 设置填充颜色（这里设置为蓝色）
  },
};
</script>

<style>
</style>